import React, { Component } from 'react'
import './login.less'
import { withRouter } from 'react-router-dom'
import { message } from 'antd'
import initCanvas from 'style/animation/backgroundEffect/particleDynamism.js';
import LoginForm from './loginForm/loginForm'
// import Http from 'common/axios'

class LoginView extends Component {

  componentDidMount() {
    initCanvas();
    this.autoLogin();
  }

  autoLogin() {
    if (window.localStorage.getItem('remember') === 'true') {
      const data = JSON.parse(window.localStorage.getItem('userName'));
      this.onLogin({userName: data.userName, password: 'admin'});
    }
  }

  onLogin = (values) => {
    if (values.userName === 'admin' && values.password === 'admin') {
      window.localStorage.setItem('remember', values.remember);
      window.localStorage.setItem('userName', JSON.stringify({userName: 'admin'}));
      this.props.commitUserInfo({userName: 'admin'});
      this.props.history.push('/home/mainPage');
    } else {
      message.error('账号密码错误！');
    }
    // Http.request({
    //   url: '/login/user_login_check_pst',
    //   method: 'post',
    //   data: {
    //     username: values.userName,
    //     value: values.password
    //   }
    // }).then((resData) => {
    //   window.localStorage.setItem('remember', values.remember);
    //   window.localStorage.setItem('userInfo', JSON.stringify(resData.data));
    //   this.props.history.push('/home/mainPage');
    // })
  }
  
  render() {
    return (
      <section className="login">
        <canvas id="cas"></canvas>
        <div className="login-body">
          <span className="login-title">react-demo</span>
          <div className="login-contnet">
            <LoginForm onLogin={this.onLogin}></LoginForm>
          </div>
        </div>
      </section>
    )
  }
}

export default withRouter(LoginView)
